<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <p>企业总数</p>
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>订单总数</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

            </div>
            <p>收款总数</p>
        </li>
        <li class="user_Overview-item" style="color: #f5023d">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>付款总数</p>
        </li>
        <li class="user_Overview-item" style="color: #00bfff">
            <div class="user_Overview_nums testnum">
                <dv-digital-flop :config="testnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>试标人数</p>
        </li>
        <li class="user_Overview-item" style="color: #9370db">
            <div class="user_Overview_nums qcnum">
                <dv-digital-flop :config="qcnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>质检人数</p>
        </li>
        <li class="user_Overview-item" style="color: #32cd32">
            <div class="user_Overview_nums qcrate">
                <dv-digital-flop :config="qcrateconfig" style="width:100%;height:100%;" />
            </div>
            <p>质检通过率</p>
        </li>
    </ul>
    <Reacquire v-else @onclick="getData" line-height="200px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
let style = {
    fontSize: 24
}
export default {
    data() {
        return {
            options: {},
            userOverview: {
                totalNum: 0, // 企业总数
                orderNum: 0, // 订单总数
                receivableNum: 0, // 收款总数
                paymentNum: 0, // 付款总数
                testPersonNum: 0, // 试标人数
                qcPersonNum: 0, // 质检人数
                qcPassRate: 0, // 质检通过率
            },
            pageflag: true,
            timer: null,
            config: {
                number: [100],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#00fdfa",
                    fontSize: 16,
                },
            },
            onlineconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#07f7a8",
                    fontSize: 16,
                },
            },
            offlineconfig: {
                number: [0],
                content: '{nt}万',
                style: {
                    ...style,
                    fill: "#e3b337",
                    fontSize: 14,
                },
            },
            laramnumconfig: {
                number: [0],
                content: '{nt}万',
                style: {
                    ...style,
                    fill: "#f5023d",
                    fontSize: 14,
                },
            },
            testnumconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#00bfff",
                    fontSize: 16,
                },
            },
            qcnumconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#9370db",
                    fontSize: 16,
                },
            },
            qcrateconfig: {
                number: [0],
                content: '{nt}%',
                style: {
                    ...style,
                    fill: "#32cd32",
                    fontSize: 16,
                },
            }

        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        this.getData()
    },
    mounted() {
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        getData() {
            this.pageflag = true;
            currentGET("big2").then((res) => {
                if (!this.timer) {
                    console.log("业务统计数据", res);
                }
                // 后端返回格式: {code: 200, message: 'success', data: {...}}
                if (res && res.code === 200 && res.data) {
                    this.userOverview = res.data;
                    // 企业总数
                    this.config = {
                        ...this.config,
                        number: [res.data.totalNum || 0]
                    }
                    // 订单总数
                    this.onlineconfig = {
                        ...this.onlineconfig,
                        number: [res.data.orderNum || 0]
                    }
                    // 收款总数（转换为万元）
                    this.offlineconfig = {
                        ...this.offlineconfig,
                        number: [Math.round((res.data.receivableNum || 0) / 10000)]
                    }
                    // 付款总数（转换为万元）
                    this.laramnumconfig = {
                        ...this.laramnumconfig,
                        number: [Math.round((res.data.paymentNum || 0) / 10000)]
                    }
                    // 试标人数
                    this.testnumconfig = {
                        ...this.testnumconfig,
                        number: [res.data.testPersonNum || 0]
                    }
                    // 质检人数
                    this.qcnumconfig = {
                        ...this.qcnumconfig,
                        number: [res.data.qcPersonNum || 0]
                    }
                    // 质检通过率
                    this.qcrateconfig = {
                        ...this.qcrateconfig,
                        number: [res.data.qcPassRate || 0]
                    }
                    this.switper()
                } else {
                    this.pageflag = false;
                    this.$Message.warning(res.message || '获取数据失败');
                }
            }).catch(error => {
                console.error('业务统计数据请求失败:', error);
                this.pageflag = false;
            });
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
.user_Overview {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 5px;
    
    li {
        flex: 0 0 calc(25% - 6px);
        min-width: 0;

        // 最后三个居中显示
        &:nth-child(5),
        &:nth-child(6),
        &:nth-child(7) {
            flex: 0 0 calc(33.333% - 6px);
        }

        p {
            text-align: center;
            height: 18px;
            line-height: 18px;
            font-size: 13px;
            margin-top: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user_Overview_nums {
            width: 75px;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            margin: 10px auto 5px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
                z-index: 0;
            }

            // 数字容器
            :deep(.dv-digital-flop) {
                position: relative;
                z-index: 1;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");
            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");
            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");
            }
        }

        .testnum {
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");
            }
        }

        .qcnum {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
            }
        }

        .qcrate {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
            }
        }
    }
}
</style>